<template>
	<view class="toView">
		<view class="header">
			<image src="@/static/img/quickly/healthLiteracyTitle.png"></image>
			<view class="information">
				<view class="top">
					<view>会员：{{userInforDetail.realName || ''}}</view>
					<view>年龄：{{userInforDetail.age || ''}}岁</view>
					<view>性别：{{userInforDetail.sex == 1 ? '男' : userInforDetail.sex == 2 ? '女' : '未知'}}</view>
				</view>
				<view class="bottom">
					<view>签发人：{{healthName || ''}}</view>
					<view>签发日期：{{modifiedDate}}</view>
				</view>
			</view>
		</view>
		<view class="two"></view>
		<view class="three"></view>
		
		<view class="mainContent">
			<view class="informationBox">
				<view class="boxOne" style="height: 120upx;">
					<image mode="widthFix" src="@/static/img/quickly/healthLiteracy.png" style="width: 490upx;"></image>
				</view>
				<view class="boxTwo">
					<view class="single">
						<image src="@/static/img/quickly/questionnarIcon.png"></image>
						<view>
							<view class="question">您通常能够按时吃三餐吗?</view>
							<view class="answer">基本能</view>
						</view>
					</view>
					<view class="single">
						<image src="@/static/img/quickly/questionnarIcon.png"></image>
						<view>
							<view class="question">您通常能够按时吃三餐吗?</view>
							<view class="answer">基本能</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 评估报告截图-->
			<view class="assessment">
				<table>
					<tr>
						<th>2018年8月</th>
						<th>评估</th>
						<th>正常参考</th>
						<th>动态评估</th>
					</tr>
					<tr>
						<th>45分</th>
						<th>未达标</th>
						<th>≥60分</th>
						<th>进步</th>
					</tr>
				</table>
			</view>
			
			<view class="generate">生成评估</view>
		</view> 
	</view>
	
</template>

<script>
	
	export default {
		data() {
			return {
				userInforDetail:{},
				healthName:'',
				modifiedDate:'',
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/static/css/quickly/Intervention/toView.scss" ;
	.boxTwo {
		padding: 0 30upx !important;
		.single {
			display: flex;
			padding: 36upx 0 32upx;
			border-bottom: 1upx solid #E6E6E6;
			image {
				width: 24upx;
				height: 24upx;
				margin:10upx 13upx 0 0;
			}
			view {
				flex: 1;
				color: #333333;
				font-size: 28upx;
				line-height: 40upx;
			}
		}
		.single:last-child {
			border-bottom: none;
		}
	}
	.assessment {
		table {
			width: 100%;
			height: 400upx;
			tr {
				display: flex;
				background: rgba(56, 203, 151, .1);			
				min-height: 64upx;
				align-items: center;
				color: #38CB97;
				font-size: 30upx;				
				th{
					flex: 1;
					height: 64upx;
					line-height: 64upx;	
					font-weight: 400;
				}
				th:last-child {
					border-right: none;
				}
			}
			tr:nth-child(1) {
				background-color: #38CB97;
				height: 64upx;				
				color: #FFFFFF;
				th {
					font-weight: bold;
					border-right: 1upx solid #FFFFFF;
				}
			}
		}
	}
	.generate {
		margin: 60upx auto 30upx;
		width: 486upx;
		height: 70upx;
		line-height: 70upx;
		background: #38CB97;
		border-radius: 35upx;
		color: #FFFFFF;
		font-size: 30upx;
		text-align: center;
	}
	
	
</style>
